<template>
    <div class="my-padding-10">
        <!--面包屑-->
        <el-row class="my-margin-top-10">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>后台</el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :model='chunk' class="admin">


            <div class="admin-index">
                <dl >
                    <dt class="qs"><i class="fa users"></i></dt>
                    <dd v-model="chunk.teacherNum">{{chunk.teacherNum}}</dd>
                    <dd class="f12">教师访问量</dd>
                </dl>
                <dl >
                    <dt class="cs"><i class="fa chart"></i></dt>
                    <dd v-model="chunk.studentNum">{{chunk.studentNum}}</dd>
                    <dd class="f12">学生访问量</dd>
                </dl>
                <dl >
                    <dt class="hs"><i class="fa shopping-cart"></i></dt>
                    <dd v-model="chunk.courseNum">{{chunk.courseNum}}</dd>
                    <dd class="f12">课程访问量</dd>
                </dl>
                <dl >
                    <dt class="ls"><i class="fa cny"></i></dt>
                    <dd v-model="chunk.gameNum">{{chunk.gameNum}}</dd>
                    <dd class="f12">游戏访问量</dd>
                </dl>
            </div>

        </el-row>

        <el-row type="flex" class="my-margin-top-10" justify="space-between  ">
            <el-col :span="6">
            <ve-histogram width="600px"  height="400Px" :data="chartData" :settings="chartSettings" :extend="extend" ></ve-histogram>
            </el-col>
            <el-col :span="6">
            <el-table :data='table.tableData' border stripe style="width:100%" size="small"
                      :highlight-current-row="true" ref="multipleTable" >
                <el-table-column label='时间' prop="time" ></el-table-column>
                <el-table-column label='老师访问量' prop="num2"></el-table-column>
                <el-table-column label='学生访问量' prop="num1"></el-table-column>
            </el-table>
            </el-col>
        </el-row>


    </div>

</template>

<script>
    export default {
        data(){
            let viewList = [ {
                label: "学生访问量",
                value: 1
            },
                {
                    label: "老师访问量",
                    value: 2
                }];
            let metrics = viewList.map(item=>{return item.label})
            this.chartSettings = {
                metrics: metrics,
                dimension: ['日期'],
            };
            this.extend = {
                // 'xAxis.0.axisLabel.rotate': 45,
                'yAxis.0.minInterval': 1,
            };
            return {
                table:{
                    tableData: [],
                },
                chunk:{
                    courseNum: "6243",
                    gameNum: '11',
                    studentNum: '32',
                    teacherNum: '24',
                },
                editable: false,
                chartData: {
                    columns: ['日期', '学生访问量', '老师访问量'],
                    rows: [] ,
                },

            }
        },
        methods: {
            myConfig(option){
                console.log(option)
            },

            //获取数据
            getChart(){
                let p = {};
                let url = '/home/showHome';
                this.$http.fetch(url,p)
                    .then(res=>{
                        this.chunk.courseNum = res.courseNum;
                        this.chunk.gameNum = res.gameNum;
                        this.chunk.studentNum = res.studentNum;
                        this.chunk.teacherNum = res.teacherNum;
                        this.table.tableData = res.data.numVos;
                        let data = res.data.numVos;
                        this.chartData.rows = data.map(item=>{
                            let vo = {};
                            vo['日期'] = item.time;
                            vo['学生访问量'] = item.num1;
                            vo['老师访问量'] = item.num2;
                            return vo;
                        })
                    })
            },
        },

        mounted(){
            this.getChart();
        }
    }
</script>
<style>
    html{
        background-color:#f1f2f7;

    }
    .admin{
        width: 1036px;
        height: 315px;

    }
    .admin-index dd {
        margin: 0px;
    }
    .admin-index{width: 100%;height: 100px;margin-top: 8px;}
    .admin-index dl{width: 23%;margin: 10px 1%;background-color: #fff;float: left;border-radius: 5px;overflow: hidden}
    .admin-index dt{width: 40%;float: left;line-height: 100px;font-size: 45px;text-align: center;color: #FFF}
    .admin-index dd{width: 60%;text-align: center;font-size: 45px;line-height: 45px;float: right;margin-top: 15px;color: #c6cad6}
    .admin-index .f12{font-size: 14px;line-height: 16px;margin-top: 5px}
    .admin-index .qs{ width:93.7px; height: 100px; background-color: #6ccac9}
    .admin-index .cs{background-color: #ff6c60}
    .admin-index .hs{background-color: #f8d347}
    .admin-index .ls{background-color: #57c8f2}


    .users:before {
        content: "\f0c0";
    }
    .chart:before{
        content: "\f1fe";
    }
    .shopping-cart:before{
        content: "\f07a";
    }
    .cny:before{
        content: "\f157";
    }
</style>
